<template>
  <a-modal
    :title="title"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <div style="height: 500px;display: flex">
      <div style="width: 200px;height: 500px;overflow-x: auto">
        <a-tree
          :tree-data="treeData"
          :default-expanded-keys="['0-0-0', '0-0-1']"
          :default-selected-keys="['0-0-0', '0-0-1']"
          :default-checked-keys="['0-0-0', '0-0-1']"
          @select="onSelect"
          @check="onCheck"
        >
          <span slot="title0010" style="color: #1890ff">二纺</span>
        </a-tree>
      </div>
      <div>
        <div style="display: flex;width: 100%;justify-content: space-between;align-items: center;">
          <div>
            <a-input v-model="userName" placeholder="请输入姓名或工号" />

            <m-select-multi-user
              v-decorator="['userId', { rules: [{ required: true, message: '请选择员工' }] }]"
              :multiple="false"
              @submitSelect="userSelect"
              :disabled="false"
            />
          </div>
          <div style="margin-left: auto;;">
            <a-select v-model="qianfang" placeholder="请选择前纺工序" style="width: 200px" @change="handleChange">
              <a-select-option value="jack">
                Jack
              </a-select-option>
              <a-select-option value="lucy">
                Lucy
              </a-select-option>
            </a-select>
          </div>
        </div>
        <div style="position: relative;width: 800px;height: 500px;">
          <div style="margin-top: 10px;margin-bottom: 5px">
            <span>已选人员：</span><span>{{ selectNumber }}人</span>
          </div>
          <div>
            <a-table
              :scroll="{ x: true }"
              :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
              :columns="columns"
              :data-source="dataSource"
              rowKey="id"
              :loading="loading"
              :pagination="false"
            >
              <span slot="ingot" slot-scope="text,record">
                <a-tag
                  :color=" 'geekblue' "
                >
                  {{ record.ingot }}
                </a-tag>
              </span>
            </a-table>
            <a-pagination
              style="position: absolute; bottom: 20px"
              :default-current="ipagination.current"
              :total="ipagination.total"
              @change="onChangePage"
            />
          </div>
          <span style="position: absolute; bottom: 20px; right: 20px">{{ ipagination.total }}结果</span>
        </div>
      </div>

    </div>
  </a-modal>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

const path = '/crm_product_type_blowing/crmProductTypeBlowing/'
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import JEditor from '@/components/jeecg/JEditor'
import JSwitch from '@/components/jeecg/JSwitch'
import MSelectMultiUser from '@views/productionDispatchManagement/schedulingManagement/modules/MSelectMultiUser'

const treeData = [
  {
    title: '新华源',
    key: '0-0',
    children: [
      {
        title: '一纺',
        key: '0-0-0',
        children: [
          { title: '一纺', key: '0-0-0-0', disableCheckbox: true },
          { title: '二纺', key: '0-0-0-1' }
        ]
      },
      {
        title: '二纺',
        key: '0-0-1',
        children: [{ key: '0-0-1-0', slots: { title: 'title0010' } }]
      }
    ]
  }
]

export default {

  mixins: [JeecgListMixin],
  name: 'UserSelectModal',
  components: {
    JEditor,
    JSwitch,
    MSelectMultiUser
  },
  data() {
    return {
      dataSource1:[
        {
          workingProcedure_dictText:'a',
          productType:'a',
          workNumber:'a',
        },
        {
          workingProcedure_dictText:'b',
          productType:'b',
          workNumber:'b',
        }
      ],
      userName: '',
      qianfang: undefined,
      selectNumber: '1',
      treeData,
      title: '操作',
      visible: false,
      disable: true,
      model: {},
      confirmLoading: false,
      form: this.$form.createForm(this),
      columns: [
        {
          title: '姓名',
          align: 'center',
          width: 80,
          dataIndex: 'workingProcedure_dictText',
          ellipsis: true
        },
        {
          title: '性别',
          align: 'center',
          width: 80,
          dataIndex: 'productType',
          ellipsis: true
        },
        {
          title: '工号',
          align: 'center',
          width: 80,
          dataIndex: 'productBatch',
          ellipsis: true
        },
        {
          title: '车间',
          align: 'center',
          width: 80,
          dataIndex: 'productBranch',
          ellipsis: true
        },
        {
          title: '工序',
          align: 'center',
          width: 80,
          dataIndex: 'productCode',
          ellipsis: true
        },
        {
          title: '工种',
          align: 'center',
          width: 80,
          dataIndex: 'ration',
          ellipsis: true
        },
        {
          title: '班次',
          align: 'center',
          width: 80,
          dataIndex: 'ingot',
          ellipsis: true,
          scopedSlots: { customRender: 'ingot' },
        }
      ],
      url: {
        list: path + '/list',
        delete: path + '/delete',
        deleteBatch: path + '/deleteBatch',
        toDetail: '/personnelInformation/modules/blacklistDetails'
      }
    }
  },
  created() {
  },
  methods: {
    userSelect(e) {
      this.userInfo = e[0]
      this.model.realname = this.userInfo.realname
      console.log(e)
    },
    onSelect(selectedKeys, info) {
      console.log('selected', selectedKeys, info)
    },
    handleChange(value) {
      console.log(`selected ${value}`)
    },
    onCheck(checkedKeys, info) {
      console.log('onCheck', checkedKeys, info)
    },
    add() {
      this.disable = false
      this.model = Object.assign({}, { workingProcedure: 1 })
      this.model.workingProcedure = 1
      this.edit({}, 1)
    },
    edit(record, isEdit) {
      if (isEdit != 1) {
        this.model = Object.assign({}, record)
      }

      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.disable = true
    },

    handleOk() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign(this.model)
          console.log('formData', formData)
          //时间格式化
          httpAction(httpurl, formData, method)
            .then(res => {
              if (res.success) {
                this.$message.success(res.message)
                this.$emit('ok')
              } else {
                this.$message.warning(res.message)
              }
            })
            .finally(() => {
              this.confirmLoading = false
              this.close()
            })
        } else {
          return false
        }
      })
    },
    onChangePage(e) {
      this.ipagination.current = e
      this.loadData()
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style scoped></style>
